html, body {
  position: relative;
  /* scroll-behavior: smooth; */
}
.backtop {
  display: none;
  height: 64px;
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 20%;
  z-index: 100;
  text-align: center;
}

.backtop:hover {
  animation: jump 2s infinite;
}

.backtop-img {
  width: 48px;
  height: 100%;
}

.doc-directory {
  position: fixed;
  right: 30px;
  top: 20%;
  cursor: pointer;
  z-index: 100;
}

.header {
  width: 40px;
  height: 40px;
  float: left;
}

.header::after {
  content: '.';
  height: 0;
  visibility: hidden;
  clear: both;
  zoom: 1;
}

.title-content {
  display: none;
  float: left;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  min-width: 200px;
  /* max-width: 300px; */
  max-height: 500px;
  overflow-y: auto;
  background: #36cfc8;
  border-radius: 10px;
}

.home-title {
  font-size: 18px;
  text-align: center;
}

.category-title {
  font-size: 16px;
}

.title-content .empty-content {
  margin: 10px;
}

.common > .wrapper {
  padding-top: 5px;
}

.h2-title > .wrapper {
  font-size: 18px;
}

.h3-title > .wrapper {
  margin-left: 10px;
  font-size: 17px;
}

.h4-title > .wrapper {
  margin-left: 20px;
  font-size: 16px;
}

.h5-title > .wrapper {
  margin-left: 30px;
  font-size: 15px;
}

.wrapper {
  margin: 0 20px;
  overflow: hidden;
  /* white-space: nowrap;
  text-overflow: ellipsis; */
}

.wrapper .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  margin-right: 5px;
}

.wrapper .anchor {
  color: #fff; 
}
.wrapper .anchor:hover {
  text-decoration: none;
}

.wrapper .dot-active {
  background: red !important;
}

.wrapper .active {
  color: red;
}

@keyframes jump {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(0px, -20px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
